<template>
  <div class="">
    <header>
      <div class="left">
        <div class="logo">
          简书
        </div>

      </div>
      <div class="middle">
        <div class="homePage">
          首页
        </div>
        <div class="download">
          下载
        </div>
        <div class="search">
          <el-input size="small" placeholder="请选择日期"
                    icon="search">搜索
          </el-input>
        </div>
      </div>

      <div class="right">
        <div class="text">
          Aa
        </div>
        <div class="login">
          登入
        </div>
        <div class="register">
          注册
        </div>
        <div class="writeArticle">
          写文章
        </div>
      </div>
    </header>
    <div class="content">
      <div class="title">
        <h3>揭露女大学生北京打工生活的“内幕”</h3>
      </div>
      <div class="user">
        <div class="logo">
          <img
            src="http://upload.jianshu.io/users/upload_avatars/7705782/eac7bfc4-99fa-4f78-b5b7-11c08d7e6b36.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
            alt=""
            width="48px" height="48px">
        </div>
        <div class="right">
          <div class="name">
            北方跳跳
          </div>
          <div class="author">
            作者
          </div>
          <div class="focus">
            关注
          </div>
          <div class="clear"></div>
          <div class="description">
            2017.10.4字数hjfhsdjfhjks jfksdjk
          </div>

        </div>

      </div>
      <section>
        <p>如今毕业五年，回忆起北京打工的日子，</p>
        <p>依然心生澎湃，情绪磅礴，北京是个扎心的词眼，因为它的喜忧参半。</p>
        <p>高考失利，为了不给大城市释放二氧化碳，我毅然选择了老家的小城，差强人意地在大学混了三年，除了保证每科不挂以外，我很少去图书馆读书，甚至很少学习新的技能，按部就班地像个高中女生，毕竟身边的人都这样。</p>
        <p>选择实习基地的时候，意外得知有北京大医院的机会，我动了念头，许是厌倦了老家无聊的圈子，我跟几个同学一路北上，那是我第一次来北京，人群稠密的西客站，川流不息的大马路，灯影不辍的24小时餐厅……撩拨着我的新鲜感。</p>
        <p><strong>但在搞定一切的过程中，幸运的条件就是拥有改变自己的能力，而这种能力来自一次次的经历。</strong></p>
        <p>于是我做了人生的第一份兼职――方便面促销员，周末两天，一天九十多块，满心欢喜，但真正站到宣传区，我却不敢抬头，更不敢吆喝人来买，起初还会有人驻足，翻翻拣拣的，码货的大姐看出了我的扭捏，走过来拿住话筒：“方便面大促销了，买一包赠礼品了”</p>
        <p>于是我做了人生的第一份兼职――方便面促销员，周末两天，一天九十多块，满心欢喜，但真正站到宣传区，我却不敢抬头，更不敢吆喝人来买，起初还会有人驻足，翻翻拣拣的，码货的大姐看出了我的扭捏，走过来拿住话筒：“方便面大促销了，买一包赠礼品了”</p>
        <p>于是我做了人生的第一份兼职――方便面促销员，周末两天，一天九十多块，满心欢喜，但真正站到宣传区，我却不敢抬头，更不敢吆喝人来买，起初还会有人驻足，翻翻拣拣的，码货的大姐看出了我的扭捏，走过来拿住话筒：“方便面大促销了，买一包赠礼品了”</p>
        <p>于是我做了人生的第一份兼职――方便面促销员，周末两天，一天九十多块，满心欢喜，但真正站到宣传区，我却不敢抬头，更不敢吆喝人来买，起初还会有人驻足，翻翻拣拣的，码货的大姐看出了我的扭捏，走过来拿住话筒：“方便面大促销了，买一包赠礼品了”</p>
        <p>“像这样，大声喊，就把他们都当成小蚂蚁，他们都是来看方便面的，又不看你，别那么害怕。”她一口气说完，果断坚决</p>
        <p>他切肥肠、牛肉，鸡块，娴熟不已，偶尔吹着口哨，他说他在超市干了五年了，北京对于他这种人来说，没啥好机会，横竖都是打工，所以也没指望过其他门路，还说将来手艺练得好，就回家开熟食店去。</p>
      </section>
      <hr>
    </div>
  </div>
</template>
<script>

  export default {
    data: function () {
      return {
        hello: 'hello world'
      }

    }
  }
</script>
<style scoped>

  header {
    position: fixed;
    height: 58px;
    width: 100%;
    font-size: 34px;
    text-align: center;
    color: #333;
    border-color: #f0f0f0;
    border-width: 0 0 1px;
    background-color: #fff;
  }

  .left {
    float: left;
    margin-left: 50px;
    padding-top: 5px;
  }

  .logo {
    float: left;
  }

  .middle {
    float: left;
    margin-left: 100px;
    padding-top: 5px;

  }

  .homePage {
    float: left;
    margin-left: 10px;

  }

  .download {
    float: left;
    margin-left: 10px;

  }

  .search {
    float: left;
    width: 100px;
    margin-left: 10px;

  }

  .right {
    float: right;
    margin-right: 10px;
    padding-top: 5px;

  }

  .text {
    float: left;
    margin-right: 10px;
  }

  .login {
    float: left;
    margin-right: 10px;

  }

  .register {
    float: left;
    margin-right: 10px;

  }

  .writeArticle {
    float: left;
    margin-right: 10px;

  }

  .content {
    padding-top: 70px;
    width: 760px;
    height: 1000px;
    margin: 0 auto;
  }

  .user {
    height: 48px;
  }

  .user .right {
    float: left;
  }

  .user .name {
    float: left;
    margin-left: 5px;
  }

  .user .author {
    float: left;
    margin-left: 5px;

  }

  .user .focus {
    float: left;
    margin-left: 5px;
  }

  .user .description {
    font-size: 12px;
    float: left;
    margin-top: 5px;
    margin-left: 5px;
  }

</style>

